<template>
	<el-container style="height: 100%">
		<el-header class="header">
			<p class="fl">
				<img src="../assets/logo.png" height="60" alt="" style="vertical-align: middle;display: block;float: left; margin-right: 10px;">
				<span>销装维管理系统</span>
			</p>
			<p class="fr header-right">
				<span>{{user.cname}}</span>&nbsp;&nbsp;
				<el-dropdown>
					<span class="el-dropdown-link">
						<i class="iconfont icon-caidan"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<!-- <el-dropdown-item @click.native="dialogChangeInfoVisible=true">个人信息</el-dropdown-item> -->
						<el-dropdown-item @click.native="dialogChangePwdVisible=true">修改密码</el-dropdown-item>
						<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</p>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<el-menu :default-active="activeTabName" background-color="#4b4e5f" text-color="#aeb4b7" active-text-color="#fff"
				 style="min-height: 100%; overflow: hidden;" :collapse='isCollapse'>
					
					
					<!-- <el-menu-item class="menu" index="RoleMenu" @click="addTab('角色菜单管理', 'RoleMenu')">角色菜单管理</el-menu-item> -->
					<el-submenu index="1">
						<template slot="title">故障处理</template>
						<!-- <el-menu-item v-if="menuList.indexOf('InquiryForm') != -1" class="menu" index="InquiryForm" @click="addTab('咨询单', 'InquiryForm')">咨询单</el-menu-item>
						<el-menu-item v-if="menuList.indexOf('FaultDispatch') != -1" class="menu" index="FaultDispatch" @click="addTab('故障单', 'FaultDispatch')">故障单</el-menu-item>
						<el-menu-item v-if="menuList.indexOf('Azd') != -1" class="menu" index="Azd" @click="addTab('安装单', 'Azd')">安装单</el-menu-item>
						<el-menu-item v-if="menuList.indexOf('WxAzd') != -1" class="menu" index="WxAzd" @click="addTab('微信安装单', 'WxAzd')">微信安装单</el-menu-item> -->
						<el-menu-item v-if="menuList.indexOf('WxGzd') != -1" class="menu" index="WxGzd" @click="addTab('微信故障单', 'WxGzd')">故障单</el-menu-item>
						<el-menu-item  class="menu" index="xzwjWxInstall" @click="addTab('xzwj微信故障单', 'xzwjWxInstall')">安装单</el-menu-item>
						<!-- <el-menu-item  class="menu" index="InventoryInfo" @click="addTab('test', 'InventoryInfo')">test</el-menu-item> -->
					</el-submenu>
					<!-- <el-submenu index="2">
						<template slot="title">系统管理</template>
						<el-menu-item v-if="menuList.indexOf('User') != -1" class="menu" index="User" @click="addTab('用户管理', 'User')">用户管理</el-menu-item>
						<el-menu-item v-if="menuList.indexOf('WgManage') != -1" class="menu" index="WgManage" @click="addTab('网格管理', 'WgManage')">网格管理</el-menu-item>
						<el-menu-item v-if="menuList.indexOf('Role') != -1" class="menu" index="Role" @click="addTab('角色管理', 'Role')">角色管理</el-menu-item>
					</el-submenu> -->
						<el-submenu index="3">
						<template slot="title">材料管理</template>
						<el-menu-item  class="menu" index="BuyerInfo" @click="addTab('采购信息', 'BuyerInfo')">采购信息</el-menu-item>
						<el-menu-item  class="menu" index="MaterialsInfo" @click="addTab('材料信息', 'MaterialsInfo')">材料信息</el-menu-item>
						<el-menu-item  class="menu" index="InventoryInfo" @click="addTab('库存信息', 'InventoryInfo')">库存信息</el-menu-item>
						<el-menu-item  class="menu" index="MaterialExamine" @click="addTab('材料查看', 'MaterialExamine')">材料查看</el-menu-item>
						<el-menu-item  class="menu" index="MaterialDetailed" @click="addTab('库存信息', 'MaterialDetailed')">个人材料详请</el-menu-item>
					</el-submenu>
						
						<el-submenu index="4">
						<template slot="title">工具管理</template>
						<el-menu-item  class="menu" index="ToolGet" @click="addTab('工具领取', 'ToolGet')">工具领取</el-menu-item>
						<el-menu-item  class="menu" index="ToolRollback" @click="addTab('工具回退', 'ToolRollback')">工具回退</el-menu-item>
						<el-menu-item  class="menu" index="ToolReport" @click="addTab('工具报备', 'ToolReport')">工具报备</el-menu-item>
						<el-menu-item  class="menu" index="ToolExamine" @click="addTab('工具查看', 'ToolExamine')">工具查看</el-menu-item>
					
					</el-submenu>
					<!-- <el-menu-item class="menu" index="index" @click="addTab('首页', 'Home')">首页</el-menu-item>
					<el-submenu index="2">
						<template slot="title">家宽报装</template>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title">家宽对账管理</template>
					</el-submenu>
					<el-submenu index="4">
						<template slot="title">ONU回收管理</template>
					</el-submenu>
					<el-submenu index="5">
						<template slot="title">家宽报装流程</template>
					</el-submenu>
					<el-submenu index="6">
						<template slot="title">商机管理</template>
					</el-submenu>
					<el-submenu index="7">
						<template slot="title">商机管理</template>
					</el-submenu>
					<el-submenu index="8">
						<template slot="title">故障处理流程</template>
						<el-menu-item class="subMenu" index="InquiryForm" @click="addTab('咨询单', 'InquiryForm')">咨询单</el-menu-item>
						<el-menu-item class="subMenu" index="FaultDispatch" @click="addTab('故障派单', 'FaultDispatch')">故障派单</el-menu-item>
						<el-menu-item class="subMenu" index="FaultInquiry" @click="addTab('故障查询处理', 'FaultInquiry')">故障查询处理</el-menu-item>
						<el-menu-item class="subMenu" index="FaultReturnVisit" @click="addTab('故障回访', 'FaultReturnVisit')">故障回访</el-menu-item>
						<el-menu-item class="subMenu" index="FaultOrder" @click="addTab('故障分单', 'FaultOrder')">故障分单</el-menu-item>
					</el-submenu> -->
				</el-menu>
			</el-aside>
			<el-container>
				<el-main style="padding-bottom: 0; display: flex;">
					<!-- <keep-alive>
						<router-view v-if="isRouterAlive"></router-view>
					</keep-alive> -->
					<el-tabs class="customer-tabs" v-model="activeTabName" type="card" closable @tab-remove="removeTab">
						<el-tab-pane
							v-for="(item, index) in tabList"
							:key="index"
							:label="item.title"
							:name="item.name"
						>
							<BaseHtml :name="item.name" style="height: 100%;width: 100%;"></BaseHtml>
						</el-tab-pane>
					</el-tabs>
				</el-main>
				<el-footer class="wrap-footer" style="height: 30px;">广州市景天通信技术有限公司 © 2019 版权所有</el-footer>
			</el-container>
		</el-container>
		<!--修改个人信息-->
		<el-dialog title="修改个人信息" width="600px" @close="dialogChangeInfoVisible=false" class="dialogAdd"
				:visible.sync="dialogChangeInfoVisible" :close-on-click-modal='false'>
			<el-form ref="addForm" style="margin-right: 20px;" :model="infoForm" label-position="right" label-width="100px" size="small">
				<el-form-item label="用户名" prop="id">
					<el-input v-model="infoForm.id"></el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogChangeInfoVisible = false">取 消</el-button>
				<el-button type="primary" @click="changeInfo">确 定</el-button>
			</div>
		</el-dialog>
		<!--修改密码-->
		<el-dialog title="修改密码" width="400px" @close="cancelChangePwd" class="dialogAdd"
				:visible.sync="dialogChangePwdVisible" :close-on-click-modal='false'>
			<el-form ref="pwdForm" style="margin-right: 20px;" :model="pwdForm" label-position="right" label-width="100px" size="small">
				<el-form-item label="旧密码" prop="oldPwd">
					<el-input type="password" v-model="pwdForm.oldPwd"></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="newPwd">
					<el-input type="password" v-model="pwdForm.newPwd"></el-input>
				</el-form-item>
				<el-form-item label="确认新密码" prop="newPwd1">
					<el-input type="password" v-model="pwdForm.newPwd1"></el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogChangePwdVisible = false">取 消</el-button>
				<el-button type="primary" @click="changePwd">确 定</el-button>
			</div>
		</el-dialog>
	</el-container>
</template>

<script>
	import BaseHtml from '../components/BaseHtml'
	export default {
		components: {
            BaseHtml,
        },
		data(){
			return {
				isCollapse: false,
				user: {},						//	当前登录人信息
				activeTabName: '',
                tabList: [],
				menuList: [],			//	能看到的菜单
			/**************************修改个人信息********************* */
				dialogChangeInfoVisible: false,
				infoForm: {},
			/**************************修改密码********************* */
				dialogChangePwdVisible: false,
				pwdForm: {
					oldPwd: '',
					newPwd: '',
					newPwd1: ''
				},
			}
		},
		created(){
			this.$post("/api/UrlController/getUrls", {}, (data) => {
				console.log(data)
				this.user = data.user
				data.list.map(item => {
					if(item.path) this.menuList.push(item.path)
				})
			})
		},

		mounted() {
			
		},
		
		methods: {
			//	添加tab
			addTab(title, tabName) {
				let flag = this.tabList.some(item => {
					if(item.name == tabName){
						return true
					}
				})
				if(!flag){
					this.tabList.push({
						title: title,
						name: tabName
					});
				}
				this.activeTabName = tabName;
			},
			//	移除tab
			removeTab(targetName) {
				let tabs = this.tabList;
				let activeName = this.activeTabName;
				if (activeName === targetName) {
					tabs.forEach((tab, index) => {
						if (tab.name === targetName) {
							let nextTab = tabs[index + 1] || tabs[index - 1];
							if (nextTab) {
								activeName = nextTab.name;
							}
						}
					});
				}
				this.activeTabName = activeName;
				this.tabList = tabs.filter(tab => tab.name !== targetName);
			},
			//	退出登录
			logout(){
				this.$post("/anapi/LoginController/logout", {}, (data) => {
					this.$router.replace('./login')
				})
			},
			/***********************修改个人信息************************ */
				changeInfo(){

				},
			/***********************修改密码************************ */
				//	修改密码
				changePwd(){
					if(!this.pwdForm.oldPwd.trim()){
						this.$message.error("请输入旧密码！")
						return
					}
					if(!this.pwdForm.newPwd.trim()){
						this.$message.error("请输入新密码！")
						return
					}
					if(this.pwdForm.newPwd != this.pwdForm.newPwd1){
						this.$message.error("两次密码输入不一致！")
						return
					}
					this.$post("/api/UserController/changePwd", this.pwdForm, (data) => {
						this.$message.success("修改成功！")
						this.logout()
					})
				},
				//	取消修改密码
				cancelChangePwd(){
					this.$refs.pwdForm.resetFields()
				},
        }
	};
</script>


<style lang="less" scoped>
	.header-right{
		font-size: 20px;
		i{
			font-size: 20px;
			cursor: pointer;
			line-height: 20px;
			margin-top: 20px;
			color: #fff;
			position: relative;
			top: 3px;
		}
	}
	.subMenu{
		background: #373c4f !important;
		overflow: hidden;
		&:hover{
			background: #3c3e4c !important;
		}
		&.is-active{
			background: #4b8cf0 !important;
		}
	}
	.menu{
		&.is-active{
			background: #4b8cf0 !important;
		}
	}
	.wrap-footer{
		background: #f2f2f2;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
	}
</style>
<style lang="less">
	.customer-tabs{
		width: 100%;
		flex: 1 1 0%;
		display: flex;
		flex-direction: column;
		>.el-tabs__content{
			overflow: auto;
			flex: 1;
			.el-tab-pane{
				height: 100%;
			}
		}
	}
</style>

